<template>
	<n-date-picker
		v-model:value="date"
		type="daterange"
		clearable
		class="base-date-picker max-w-[300px] relative rounded-[16px]"
		:is-date-disabled="isRangeDateDisabled"
		@confirm="onConfirm"
		@clear="onClear" />
</template>

<script setup lang="ts">
import { NDatePicker } from 'naive-ui'
import { PropType, ref, watch } from 'vue'

const props = defineProps({
	modelValue: {
		type: Array as PropType<any[]>,
		default: () => [0, 0]
	},
	min: {
		type: String as PropType<any>
	},
	max: {
		type: String as PropType<any>
	}
})

const emits = defineEmits(['update:modelValue', 'confirm', 'clear'])
const date: any = ref(props.modelValue)

watch(
	() => props.modelValue,
	(newValue) => (date.value = newValue)
)

const isRangeDateDisabled = (ts: number) => {
	const [minDay, minMonth, minYear] = props.min?.split('-') || ''
	const minDate = new Date(Number(minYear), Number(minMonth) - 1, Number(minDay))
	return ts < minDate.getTime() || ts > Date.now()
}

const onClear = () => {
	emits('clear')
	emits('update:modelValue', null)
}

const onConfirm = (value: any) => {
	emits('update:modelValue', value)
	emits('confirm')
}
</script>

<style lang="scss">
.base-date-picker {
	div:first-child {
		border-radius: 16px;
	}
}
</style>
